<script>
import router from "@/router";
import axios from "axios";

export default {
  data() {
    return {
      // 定义进度状态和岗位信息数组
      progressItems: [
        { enterprisename:'拼多多', jobname: 'web前端开发', status: '投递中' },
        { enterprisename:'拼多多', jobname: 'Java开发', status: '已拒绝' },
        { enterprisename:'拼多多', jobname: '产品经理', status: '同意面试' },
      ]
    };
  },
  methods: {
    // 根据状态自动匹配 percentage 和 text
    getStatusInfo(status) {
      switch (status) {
        case '投递中':
          return { percentage: 50, text: '投递中' };
        case '已拒绝':
          return { percentage: 100, text: '投递失败' };
        case '同意面试':
          return { percentage: 100, text: '投递成功，等待面试' };
        default:
          return { percentage: 0, text: '未知状态' };
      }
    },
    resume() {
      router.push('/resume');
    },
    myMatch() {
      router.push('/post');
    },
    exit() {
      router.push('/');
    }
  },
    mounted() {
      // 在页面挂载时，从 localStorage 中获取存储的 id
      const s = localStorage.getItem('seekerId');
      console.log(s);
      axios.post('http://localhost:8082/deliver/selectDeliverBySeeker', {
        seekerid: s,
      }, {
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(response => {
        console.log(response.data);
        this.progressItems=response.data;
      }).catch(error => {
        console.error('登录时出错:', error);
      });
    }
};
</script>

<template>
  <div class="body1" style="background-color: #DBE2EF;background-size: cover;">
    <el-row justify="center">
      <h1 style="color:#3F72AF;font-size: 36px">我的投递</h1>
    </el-row>
    <el-row justify="center" style="">
      <el-col :span="24" style="justify-content: center;text-align: center;">
        <div class="card3" style="background-color: #f9f7f7;width: 1300px">
          <div style="height: 60px"></div>
          <!-- 使用 v-for 循环遍历 progressItems 数组 -->
          <div v-for="(item, index) in progressItems" :key="index" class="progress-item">
            <el-row align="middle" style="margin-top: 20px">
              <el-col :span="8">
                <el-row style="margin-left: 20px">
                  <h2 class="background1">投递岗位：</h2>
                  <h2 class="background2">{{item.enterprisename}}{{ item.jobname }}</h2>
                </el-row>
              </el-col>
              <el-col :span="16">
                <!-- 使用 getStatusInfo 方法动态获取 percentage 和 text -->
                <el-progress
                  :percentage="getStatusInfo(item.status).percentage"
                  :status="item.status"
                  width="120px"
                  :stroke-width="18"
                  style="max-width: 800px;">
                  <h3>{{ getStatusInfo(item.status).text }}</h3>
                </el-progress>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-button circle style="background-color: #3F72AF;padding: 50px;border:0;box-shadow: 5px 5px 5px 2px #444444;
  z-index: 99;position: absolute; top: 2%; left: 170px; transform: translateY(50%);"
  ></el-button>
  <el-dropdown placement="bottom" style=" z-index: 99;position: absolute; top: 1%; right: 2%; transform: translateY(50%);" size="large">
    <span class="dropdown"> 我的 </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="resume">AI简历</el-dropdown-item>
        <el-dropdown-item @click="myMatch">匹配岗位</el-dropdown-item>
        <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
@import "../assets/css/global.css";
.background1 {
  background-color: #DBE2EF;
  border-radius: 15px 0 0 15px ;
}
.background2 {
  background-color: #DBE2EF;
  border-radius: 0 15px 15px 0;
}
.background3 {
  margin-top: 10px;
  background-color: #f9f7f7;
  border-radius: 15px;
  height: 220px;
  width: 400px;
  padding: 10px;
  margin-left: 20px;
}
.btn {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}
.btn1 {
  padding: 20px 40px;
  border: none;
  background-color: #f9f7f7;
  color: #3F72AF;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10px;
  margin:20px;
  margin-left:430px;
}
.btn1:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
}
/* 活动状态按钮样式 */
.btn.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.btn.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.myDiv{
  background-color: #f9f7f7;
  border-radius: 15px;
  height: 130px;
  width: 840px;
  padding: 10px;
  margin-left: 20px;
  overflow-y: auto;
}
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 4px; /* 水平滚动条的高度 */
}
::-webkit-scrollbar-thumb {
  background-color: #3F72AF; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
}
::-webkit-scrollbar-track {
  width: 8px;
  height: 4px;
  border-radius: 8px;
  background-color: transparent; /* 轨道颜色 */
}
.card3{
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 936px;
  height: 700px;
  border: #bbbbbb solid 1px;
  border-radius: 50px;
  background: #DBE2EF;
  box-shadow: 15px 15px 20px 2px #444444;
  z-index: 1; /* 确保card2层级低于card1 */
}
.dropdown{
  background-color: #f9f7f7;
  color: #3F72AF;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
.dropdown:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>